<template>
    <div class="page" >
        <h3 class="page_title" >路由篇</h3>
        <p>
            文档链接：
            https://next.router.vuejs.org/guide/migration/index.html#new-router-becomes-createrouter
        </p>
        <div>
            <h3>按钮导航</h3>
            <button @click="toChild" > 去一个子路由 </button>
        </div>
        <div>
            <h3 class="page_title" >子路由区域</h3>
            <router-view />
        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue';
    import { useRouter,NavigationFailureType,isNavigationFailure } from 'vue-router';
    export default defineComponent({
        name:'Router',
        setup () {
            const router = useRouter()

            const toChild = async () => {
                // 动态路由 :id 则跳转时必须指明 参数 params: { id:xxx } 否则会报错
                // vue3 后，路由均为异步
                try {
                    const failure = await router.push({name:"child01",params:{id:'90809808'}})
                    console.log(failure,'failure')
                    if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
                        console.log('导航失败')
                    }
                } catch (error) {
                    console.log('导航失败222',error)
                }
                
            }
            return {
                toChild
            }
        }
    })
</script>

<style lang="less" scoped>

</style>